<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/plane.min.css">
</head>

<body>
    <div class="nav">上:W 下:S 左:A 右:D / 拖拽</div>
    <div class="box">
        <div class="mask"></div>
    </div>
    <script src="./data/tank.js"></script>
    <script>
        function Plane(options) {
            this.parent = options.parent;
            this.speed = 10;
            this.fireSpeed = 10;
            this.planeStyle = null;
            this.tank = null;
            this.tankStyle = null;
            this.parentStyle = getComputedStyle(this.parent, null);
            this.time = null;
            this.create();

        }
        Plane.prototype.create = function () {
            var self = this;
            this.plane = document.createElement("div");
            this.plane.classList.add("plane");
            this.plane.dataset.hp = 2000;
            var exhaust = document.createElement("div");
            exhaust.classList.add("exhaust");
            this.plane.appendChild(exhaust);
            this.parent.appendChild(this.plane);
            this.planeStyle = getComputedStyle(this.plane, null);
            this.mask = this.parent.querySelector(".mask");
            this.tank = document.createElement("div");
            this.tank.classList.add("tank");
            this.tank.dataset.hp = 5000;
            var hp = document.createElement("div");
            hp.classList.add("hp");
            hp.textContent = "HP:" + this.tank.dataset.hp;
            this.tank.innerHTML = `${tank}`;
            this.tank.appendChild(hp);
            this.parent.appendChild(this.tank);
            this.tankStyle = getComputedStyle(this.tank, null);
            this.tankTime = null;
            setTimeout(function () {
                self.addPlaneMove();
                self.addTankMove();
                self.init();
            }, 500)
        }
        Plane.prototype.addPlaneMove = function () {
            var self = this;
            document.onkeydown = function (e) {
                switch (e.keyCode) {
                    case 87://上
                        var top = parseInt(self.planeStyle.top) - self.speed;
                        top = top <= 0 ? 0 : top;
                        self.plane.style.top = top + "px";
                        break;
                    case 83://下
                        var top = parseInt(self.planeStyle.top) + self.speed;
                        top = top >= parseInt(self.parentStyle.height) - parseInt(self.planeStyle.height) ? parseInt(self.parentStyle.height) - parseInt(self.planeStyle.height) : top;
                        self.plane.style.top = top + "px";
                        break;
                    case 65://左
                        var left = parseInt(self.planeStyle.left) - self.speed;
                        left = left <= 0 ? 0 : left;
                        self.plane.style.left = left + "px";
                        break;
                    case 68://右
                        var left = parseInt(self.planeStyle.left) + self.speed;
                        left = left >= parseInt(self.parentStyle.width) - parseInt(self.planeStyle.width) ? parseInt(self.parentStyle.width) - parseInt(self.planeStyle.width) : left;
                        self.plane.style.left = left + "px";
                        break;
                }
            };
            self.mask.onmousedown = function (e) {
                e.preventDefault();
                var check = e.offsetX >= parseInt(self.planeStyle.left) && e.offsetY >= parseInt(self.planeStyle.top) && e.offsetX <= parseInt(self.planeStyle.left) + parseInt(self.planeStyle.width) && e.offsetY <= parseInt(self.planeStyle.top) + parseInt(self.planeStyle.height);
                if (!check) return;
                self.mask.onmousemove = function (e) {
                    var left = e.pageX - parseInt(self.planeStyle.width) / 2;
                    left = left <= 0 ? 0 : left >= parseInt(self.parentStyle.width) - parseInt(self.plane.width) / 2 ? parseInt(self.parentStyle.width) - parseInt(self.plane.width) / 2 : left;
                    var top = e.pageY - 50 - parseInt(self.planeStyle.height) / 2;
                    top = top <= 0 ? 0 : top >= parseInt(self.parentStyle.height) - parseInt(self.plane.height) / 2 ? parseInt(self.parentStyle.height) - parseInt(self.plane.height) / 2 : top;
                    self.plane.style.left = left + "px";
                    self.plane.style.top = top + "px";
                    if (parseInt(self.plane.style.left) >= parseInt(self.parentStyle.width) - parseInt(self.planeStyle.width)) {
                        self.plane.style.left = parseInt(self.parentStyle.width) - parseInt(self.planeStyle.width) + "px";
                    }
                    if (parseInt(self.plane.style.top) >= parseInt(self.parentStyle.height) - parseInt(self.planeStyle.height)) {
                        self.plane.style.top = parseInt(self.parentStyle.height) - parseInt(self.planeStyle.height) + "px";
                    }
                }
            }
            self.mask.onmouseleave = function () {
                this.onmousemove = null;
            }
            self.mask.onmouseup = function () {
                this.onmousemove = null;
            }
        }
        Plane.prototype.addTankFire = function(){
            var self = this;
        }
        Plane.prototype.addTankMove = function () {
            var self = this;
            this.tankTime = setInterval(function () {
                var how = Math.floor(Math.random() * 4);
                switch (how) {
                    case 0://上
                        var top = parseInt(self.tankStyle.top) - self.speed * 3;
                        top = top <= 0 ? 0 : top;
                        self.tank.style.top = top + "px";
                        break;
                    case 1://下
                        var top = parseInt(self.tankStyle.top) + self.speed * 3;
                        top = top >= parseInt(self.parentStyle.height) - parseInt(self.tankStyle.height) ? parseInt(self.parentStyle.height) - parseInt(self.tankStyle.height) : top;
                        self.tank.style.top = top + "px";
                        break;
                    case 2://左
                        var left = parseInt(self.tankStyle.left) - self.speed * 3;
                        left = left <= parseInt(self.parentStyle.width) / 2 ? parseInt(self.parentStyle.width) / 2 : left;
                        self.tank.style.left = left + "px";
                        break;
                    case 3://右
                        var left = parseInt(self.tankStyle.left) + self.speed * 3;
                        left = left >= parseInt(self.parentStyle.width) - parseInt(self.tankStyle.width) ? parseInt(self.parentStyle.width) - parseInt(self.tankStyle.width) : left;
                        self.tank.style.left = left + "px";
                        break;
                }
            }, 500);
        }
        Plane.prototype.init = function () {
            var self = this;
            clearInterval(this.time);
            this.time = null;
            this.time = setInterval(function () {
                var fires = document.getElementsByClassName("fire");
                if (fires && fires.length >= 100) return;
                var fire = document.createElement("div");
                fire.classList.add("fire");
                fire.style.left = parseInt(self.planeStyle.width) + parseInt(self.planeStyle.left) - 10 + "px";
                fire.style.top = parseInt(self.planeStyle.height) / 2 - 3 + parseInt(self.planeStyle.top) + "px";
                self.parent.appendChild(fire);
                var fireStyle = getComputedStyle(fire, null);
                var fireTime = setInterval(function () {
                    if (parseInt(getComputedStyle(fire, null).left) + 30 >= parseInt(self.parentStyle.width)) {
                        fire.remove();
                        clearInterval(fireTime);
                    }
                    fire.style.left = parseInt(getComputedStyle(fire, null).left) + self.fireSpeed + "px";
                    //碰撞处理
                    if ((parseInt(fireStyle.left) >= parseInt(self.tankStyle.left) && parseInt(self.planeStyle.left) <= parseInt(self.tankStyle.left) && (parseInt(fireStyle.top) <= parseInt(self.tankStyle.top) + parseInt(self.tankStyle.height)) && (parseInt(fireStyle.top) >= parseInt(self.tankStyle.top)))) {
                        if (self.tank.dataset.hp < 0) self.tank.dataset.hp = 10000;
                        var hp = self.tank.querySelector(".hp");
                        hp.textContent = `HP:${parseInt(hp.textContent.split(":")[1]) - 1}`;
                        fire.remove();
                        clearInterval(fireTime);
                    }
                }, 10);
            }, 100);
        }
        var options = {
            parent: document.getElementsByClassName("box")[0]
        }
        var plane = new Plane(options);
    </script>
</body>

</html>